<template>
  <div class="create-product-page">
    <a-card title="新建商品" class="product-card">
      <a-form @submit.prevent="handleSubmit" layout="vertical">
        <a-form-item label="上传商品图片">
          <a-upload
            name="image"
            list-type="picture"
            :before-upload="beforeUpload"
            :on-change="handleImageChange"
          >
            <a-button>
              <a-icon type="upload" /> 点击上传
            </a-button>
          </a-upload>
        </a-form-item>

        <a-form-item label="商品名称">
          <a-input v-model:value="product.prodname" placeholder="请输入商品名称" />
        </a-form-item>

        <a-form-item label="商品描述">
          <a-textarea
            v-model:value="product.prodcaption"
            placeholder="请输入商品描述"
            rows="4"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="商品价格">
          <a-input-number
            v-model:value="product.prodprice"
            min="0"
            placeholder="请输入商品价格"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="商品库存">
          <a-input-number
            v-model:value="product.prodcount"
            min="0"
            placeholder="请输入商品库存"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">确定</a-button>
          <a-button style="margin-left: 8px;" @click="handleCancel">取消</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import request from '../../../util/request';

export default {
  name: 'CreateProduct',
  components: {
    UploadOutlined,
  },
  setup() {

    const router = useRouter();

    const product = ref({
      prodname: '',
      prodcaption: '',
      prodprice: null,
      prodcount: null,
      prodpicture: null,
    });

    const beforeUpload = (file) => {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        message.error('只能上传图片文件!');
      }
      return isImage;
    };

    const handleImageChange = (info) => {
      // if (info.file.status === 'done') {
      //   product.value.image = info.file.response.url; // 假设后端返回图片 URL
      // }
      console.log('该功能未建设完成');
      console.log('info:', info);
      message.success(`${info.file.name} 上传成功`);
    };

    const handleSubmit = () => {
      console.log('提交的商品信息:', product.value);
      // 这里可以添加 API 调用逻辑以保存商品信息
      request.post('/product/create', {
        ...product.value,
        busid: sessionStorage.getItem('userid'),
      }).then(res => {
        if(res.data.flag === 'success') {
          message.success('商品创建成功');
          router.push('/business/myProd'); // 假设返回商品列表页面
        } else {
          message.error('商品创建失败, 请稍后重试或联系管理员');
        }
      }).catch(err => {
        message.error('商品创建失败' + err);
      });
    };

    const handleCancel = () => {
      router.push('/business/myProd'); // 假设返回商品列表页面
    };

    return {
      product,
      beforeUpload,
      handleImageChange,
      handleSubmit,
      handleCancel,
    };
  },
};
</script>

<style scoped>
.create-product-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使卡片垂直居中 */
}

.product-card {
  width: 400px; /* 设置卡片宽度 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
